<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>videos</title>
		<style type="text/css">
			/* 设置表格居中并添加间距 */
			table {
				margin: 0 auto; /* 水平居中 */
				border-spacing: 10px; /* 添加单元格间距 */
				width: 100%; /* 设置表格宽度为100% */
			}

			/* 设置单元格样式 */
			td {
				width: 200px; /* 设置宽度 */
				height: 300px; /* 设置高度 */
				padding: 10px; /* 设置内边距 */
				text-align: center; /* 文本居中 */
				vertical-align: middle; /* 垂直居中 */
				border: 2px solid pink; /* 设置边框 */
				border-radius: 10px; /* 设置边框圆角 */
				background-color: #fff; /* 设置单元格背景颜色 */
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 添加阴影 */
				transition: all 0.3s ease; /* 添加过渡效果 */
			}

			/* 当鼠标悬停在单元格上时 */
			td:hover {
				transform: translateY(-10px); /* 向上移动10像素 */
				box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); /* 添加更大的阴影 */
			}

			/* 设置单元格中的图像样式 */
			td img {
				display: block; /* 将图像设置为块级元素 */
				margin: 0 auto; /* 水平居中 */
				height: 100%; /* 设置高度为100% */
				border-radius: 10px; /* 设置圆角 */
			}

			/* 设置单元格中的段落样式 */
			td p {
				margin-top: 10px; /* 设置顶部外边距 */
				font-size: 18px; /* 设置字体大小 */
				font-weight: bold; /* 设置字体加粗 */
				color: #333; /* 设置字体颜色 */
			}


		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>
					<img src="img/bg.jpg" alt="影视名称">
					<p>影视名称</p>
				</td>
				<td>
					<img src="img/bg.jpg" alt="影视名称">
					<p>影视名称</p>
				</td>
				<td>
					<img src="img/bg.jpg" alt="影视名称">
					<p>影视名称</p>
				</td>
			</tr>
			<tr>
				<td>
					<img src="img/bg.jpg" alt="影视名称">
					<p>影视名称</p>
				</td>
				<td>
					<img src="img/bg.jpg" alt="影视名称">
					<p>影视名称</p>
				</td>
				<td>
					<img src="img/bg.jpg" alt="影视名称">
					<p>影视名称</p>
				</td>
			</tr>
			<tr>
				<td>
					<img src="img/bg.jpg" alt="影视名称">
					<p>影视名称</p>
				</td>
				<td>
					<img src="img/bg.jpg" alt="影视名称">
					<p>影视名称</p>
				</td>
				<td>
					<img src="img/bg.jpg" alt="影视名称">
					<p>影视名称</p>
				</td>
			</tr>
		</table>

	</body>
</html>